$(function () {
    let layer = layui.layer
    // ---------------  创建剪裁区 ------------------
    // - 找到剪裁区的图片 （img#image）
    var $image = $('#image');    // - 设置配置项
    var options = {
        // 纵横比(宽高比)
        aspectRatio: 1, // 正方形
        // 指定预览区域
        preview: '.img-preview' // 指定预览区的类名（选择器）
    };
    // - 调用cropper方法，创建剪裁区
    $image.cropper(options);
    // 点击上传按钮触发文件表单点击事件
    // 移花接木
    $('#chooseImageBtn').on('click', function () {
        $('#chooseImageInp').click()
    })
    // 文件上传内容改变事件
    $('#chooseImageInp').on('change', function () {
        // 判断用户是否选中文件  files.length 和文件对象的返回值this.files[0]有的话是信息无则是undefined

        // if (this.files.length > 0) {

        // }
        // dom的方法记住不带$
        let file = this.files[0]
        if (file === undefined) {
            return layer.msg('上传文件，不能为空！')
        }
        // 根据文件对象生成路径
        let url = URL.createObjectURL(file)
        // 有图片地址就要重新赋值给照片区域
        $image.cropper('destroy')
            .attr('src', url)
            .cropper(options);
        // 3.3 更换剪裁区的图片(销毁剪裁框 --> 更换图片 --> 重新生成剪裁框)
        //  $image.cropper('replace', url);

    })
    // 上传
    $('#uploadBtn').on('click', function () {
        // 将裁剪区的图片转换为base64位图片
        var dataURL = $image.cropper('getCroppedCanvas',
         { width: 100, height: 100 })
         .toDataURL()
        //  发起请求
        axios({
            method:'POST',
            url:'/my/update/avatar',
            // 需要编码
            data:'avatar='+ encodeURIComponent(dataURL)
        }).then(res=>{
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('恭喜您，更改头像成功！')
            // 调用index的方法重新赋值头像
            window.parent.getUserInfo()
        })
    })


})